<template>
	<view>
		<!-- 自定义导航 -->
		<uni-nav-bar :fixed="true" :border="true" :status-bar="true">
			<block slot="left">
				<view class="nav-left" @tap="searchClick"><view class="icon iconfont icon-icon-"></view></view>
			</block>
			<view class="nav-title">消息</view>
		</uni-nav-bar>

		<view class="uni-tab-bar">
			<scroll-view :style="{ height: swiperHeight + 'px' }" scroll-y="true" class="swiper-box list">
				<view class="chat-list">
					<!-- 系统默认消息 -->
					<block v-for="(item, idx) in sysMessages" :key="idx"><sys-item :item="item.data" :type="item.type"></sys-item></block>

					<!-- 用户消息 -->
					<uni-swipe-action>
						<block v-for="(item, index) in userList" :key="item.userId + index">
							
							<uni-swipe-action-item  :right-options="options" @click="delChatUser($event,index)" @change="change">
								<chat-user :item="item" type="USER"></chat-user>
							</uni-swipe-action-item>
							
						</block>
					</uni-swipe-action>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import chatUser from '../../components/chat/chat-user.vue';
import sysItem from '../../components/chat/sys-item.vue';
import { mapState, mapMutations } from 'vuex';
import MessageUser from '../../utils/MessageUser.js';
import Constant from '../../utils/Constant.js';
import showToast from '../../utils/ToastUtils.js';
export default {
	components: {
		chatUser,
		sysItem
	},
	data() {
		return {
			swiperHeight: 0,
			options: [
				{
					text: '删除',
					style: {
						backgroundColor: '#888888',
						fontSize: '34rpx'
					}
				}
			],
			customer:{},
			userList: [],
			sysMessages: []
		};
	},
	onLoad() {
		uni.getSystemInfo({
			success: res => {
				this.swiperHeight = res.windowHeight - 65;
			}
		});
		this.customer = uni.getStorageSync(Constant.customer);
	},
	onShow() {
		this.userList = this.getChatList();
		uni.hideTabBarRedDot({ index: 2});
		this.loadSysMsg();
	},
	methods: {
		...mapMutations(['setChatTabIndex']),
		changSelected(e) {
			this.setChatTabIndex(e.detail.current);
		},
		searchClick() {
			uni.navigateTo({
				url: '../search/search'
			});
		},
		change(e,idnex) {
			this.isOpened = e;
		},

		delChatUser(e,index) {
			let username=this.userList[index];
			let user = uni.getStorageSync(Constant.user);
			let sessionKey = username.userId + user.accountNo;
			let historyChatMsgs = uni.setStorageSync('rendered_' + sessionKey,null);
			this.userList.splice(index,1);
			uni.setStorageSync(Constant.userFriend,this.userList);
		},
		loadSysMsg(){
			uni.request({
			    url: Constant.baseHttpUri + Constant.pathUri.notice,
			    header: Constant.authHead(),
				method: 'GET',
			    success: res => {
					if(res.data.code === Constant.dataCode.OK ){
						let mapData= res.data.data.map(typeCount=>{
							if(typeCount.type==='ACCOUNT'){
								return {
									data: new MessageUser(0,null, '账户通知', '../../static/sysMsgType/account.png', false, 'TEXT', typeCount.lastMsg, typeCount.lastTime, typeCount.total>0, typeCount.total),
									type: typeCount.type
								};
							}else if(typeCount.type==='SYS'){
								return { data: new MessageUser(0,null, '互动通知', '../../static/sysMsgType/sys.png', false, 'TEXT', typeCount.lastMsg, typeCount.lastTime, typeCount.total>0, typeCount.total),type: typeCount.type };
							}else{
								return{ data: new MessageUser(0,null, '钱包通知', '../../static/sysMsgType/money.png', false, 'TEXT', typeCount.lastMsg, typeCount.lastTime, typeCount.total>0, typeCount.total), type: typeCount.type };
							}
						});
						this.sysMessages = mapData;
					}else{
						showToast(res.data.msg);
					}
			    },fail:r=>{
					console.log(r);
				}
			});
		},
		getChatList() {
			let userList = uni.getStorageSync(Constant.userFriend) || [];
			userList.length>1&&userList.sort((a, b) => {
				return b.updateTime||b.lastTime - a.updateTime||b.lastTime;
			});
			let index = userList.findIndex(user=>{
				return user.nickName===this.customer.nickName;
			});
			if(index&&index<0){
				let csu = this.customer;
				userList.unshift(csu);
			}
			return userList;
		}
	}
};
</script>

<style lang="less" scoped>
.nav-left {
	margin-left: 22rpx;
	.icon-icon-::before {
		font-size: 50rpx;
		color: #555555;
	}
}
.nav-title {
	text-align: center;
	width: 100%;
	font-size: 36rpx;
	color: #333333;
	font-weight: 700;
}
.swiper-box {
	background: #f5f7fa;
}
.chat-list {
	background-color: #ffffff;
	.chat-noChat {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		color: #888888;
		font-size: 35rpx;
	}
}
</style>
